<template>
  <div class="page">
    <div class="bg"></div>
    <Breadcrumbs></Breadcrumbs>
    <div class="container">
      <div class="row" v-for="(item, index) in tableData" :key="index">
        <div class="col">
          <div
            class="col_tags"
            v-for="(ite, idx) in item.slice(0, 6)"
            :key="`${index}-${idx}`"
          >
            <div class="title">
              <i class="el-icon-caret-right"></i
              >陕西政采系统与公共资源交易平台完成对接
            </div>
            <div class="time">2023-10-31</div>
          </div>
        </div>
        <div class="col">
          <div v-if="item.length == 0">暂无数据</div>
          <div
            class="col_tags"
            v-for="(ite, idx) in item.slice(6, 12)"
            :key="`${index}-${idx}`"
          >
            <div class="title">
              <i class="el-icon-caret-right"></i
              >陕西政采系统与公共资源交易平台完成对接
            </div>
            <div class="time">2023-10-31</div>
          </div>
        </div>
      </div>
      <Pagination
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :total="total"
        @pagination="getData"
      ></Pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [...new Array(13)],
      pageSize: 10,
      pageNum: 1,
      total: 0,
    };
  },
  created() {
    this.tableData = this.arrrySplit(this.tableData);
  },
  methods: {
    //es6 一维数组切割成多个数组
    arrrySplit(arr, n = 12) {
      let arr1 = [];
      for (let i = 0; i < arr.length; i += n) {
        let arr2 = arr.slice(i, i + n);
        arr1.push(arr2);
      }
      return arr1;
    },
  },
};
</script>

<style scoped>
.row {
  display: flex;
  justify-content: space-between;
  min-height: 394px;
  background: #ffffff;
  box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.04);
  margin: 15px;
  padding: 15px;
}

.row .col {
  width: 100%;
  border-right: 1px solid #ebeef5;
  cursor: pointer;
}
.row .col:nth-child(2n) {
  border-right: none;
}
.row .col .col_tags {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 57px;
  margin: 0 31px;
  padding: 0 15px;
  border-bottom: 1px dashed #ebeef5;
}
.row .col .col_tags:hover {
  background-color: #f4f9fd;
}
.row .col .col_tags:hover .title {
  color: #2959b0;
}
.row .col .col_tags .title {
  font-size: 14px;
  flex: 1;
}
.row .col .col_tags .time {
  color: #acacac;
  font-size: 12px;
}
.bg {
  height: 300px;
  background-image: url("@/static/img/zcfg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.page {
  background-color: #fbfbfb;
}
</style>